import 'react-native-gesture-handler';
import React, {Fragment} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,Button,
  StatusBar,FlatList,Dimensions,TouchableHighlight,Image
} from 'react-native';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import { TextInput } from 'react-native-gesture-handler';
export default class DetaileScreen extends React.Component {
  state = {//根据各自后台的数据来设定需要的属性
    data:[{key: '热门推荐',jian:[{title:'热门推荐'},{title:'奇异果'},{title:'梨'},{title:'时令水果'},{title:'柑橘橙轴'},{title:'鱼'},{title:'原箱水果'},{title:'中式主食'}]}, 
    {key: '新鲜水果',jian:[{title:'新鲜水果'},{title:'奇异果'},{title:'梨'},{title:'时令水果'},{title:'柑橘橙轴'},{title:'鱼'},{title:'原箱水果'},{title:'中式主食'}]},{key: '精选肉类'},{key: '海鲜水产'},{key: '乳品糕点'},{key: '方便速食'},{key: '食品饮料'},{key:'生活用品'}],//数据数组
    right: [],//选中后右边list的数据数据
    selectedIndex: 0,//第几个选中
    height: 0,
    TuiJian:[{title:'热带水果'},{title:'奇异果'},{title:'梨'},{title:'时令水果'},{title:'柑橘橙轴'},{title:'鱼'},{title:'原箱水果'},{title:'中式主食'}]
};
renderLeftItem = ({item, index})  => {
return (
   <View style={{flexDirection:'row'}}>
        <View style={{height:(Dimensions.get('window').height)/15,width:'100%', backgroundColor: index === 0 ? '#f60':'#a89f9f' }}  ref={(ref) => this.selectedView = {...this.selectedView, [`left${index}`]: ref}}>
            <TouchableHighlight underlayColor='#f60' style={{width:'100%',height:'100%',alignItems: 'center',justifyContent: 'center'}} onPress={()=>{this.onSelected(index,item.jian)}}>
                <Text>{item.key}</Text>
            </TouchableHighlight>
        </View>
   </View>      
  )
}

renRiItem = ({item,index}) =>{
  return <View style={{width:'33%',height:(((Dimensions.get('window').height)/16)*15)/5,alignItems:'center',justifyContent: 'center'}}>
         <Image style={{width:'80%',height:'80%'}} source={require('./image/aa.jpg')}></Image> 
        <Text>{item.title}</Text>
  </View>
}
onSelected=(index,jian)=>{
  for(var s = 0 ; s < this.state.data.length;s++){
    if (index == s) {
      this.selectedView['left' + index].setNativeProps({
        style: {
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: '#f60',
          width:'100%',
          height:(Dimensions.get('window').height)/15
      }
      })
    }else{
      
      this.selectedView['left' + s].setNativeProps({
        style: {
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: '#a89f9f',
          width:'100%',height:(Dimensions.get('window').height)/15
      }
      })
    }
  
  }
  this.setState({
    TuiJian:jian
   })
}

 

    render() {
      
      return (
        // <FlatList
        // ref={'left'}
        // style={{flexGrow: 1}}
        // data={this.state.data}
        // keyExtractor={(item, index) => index.toString()}
        // renderItem={this.renderLeftItem}
        // ></FlatList>
        <View style={styles.ViewStyle}>
          <View style={styles.SoSouView}>
            <TextInput placeholder='请输入商品名称' style={styles.SoSouViewTextInput}></TextInput>
          </View>
          <View style={styles.ListViewStyle}>
            <View style={{height:(Dimensions.get('window').height),width:'25%', backgroundColor: '#a89f9f' }}>
              <FlatList style={{flexGrow: 1}} data={this.state.data} keyExtractor={(item, index) => index.toString()} renderItem={this.renderLeftItem}></FlatList>
            </View>
             <View style={{height:Dimensions.get('window').height,width:'75%',flexDirection:'row',backgroundColor:'#ffffff'}}>
               <FlatList  data={this.state.TuiJian} renderItem={this.renRiItem}   numColumns={3}></FlatList>
             </View>
          </View>
        </View>
      );
    }
  }
  const styles = StyleSheet.create({
    ViewStyle:{
      height:Dimensions.get('window').height,
      width:Dimensions.get('window').width,
    },
    SoSouView:{
        height:(Dimensions.get('window').height)/16,
        width:Dimensions.get('window').width,
        alignItems:'center'
    },
    SoSouViewTextInput:{
      height:'80%',
      width:'90%',
      borderRadius:20,
      marginTop:5,
      backgroundColor:'rgba(255,255,255,0.6)',
      elevation: 3,  //  设置阴影角度，通过这个设置有无阴影（这个是最重要的，决定有没有阴影）
      shadowColor: 'black',  //  阴影颜色
      shadowOffset: { width: 0, height: 0 },  // 阴影偏移
      shadowOpacity: 1,  // 阴影不透明度
    },
    ListViewStyle:{
      height:((Dimensions.get('window').height)/16)*15,
      width:Dimensions.get('window').width,
      flexDirection:'row'
      
    }
  })